<template>
  <a-select 
    :show-search="settings.showSearch" 
    :label-in-value="settings.labelInvalue" 
    :default-active-first-option="false"
    :filter-option="false"
    :not-found-content="null"
    @search="handleSearch"
    @blur="onBlur"
    :allowClear="settings.allowClear"
    v-model="cu" 
    style="width: 100%" 
    @change="handleChange"
    :placeholder="placeholder">
                   
    <div slot="dropdownRender" slot-scope="menu">
                     
      <v-nodes :vnodes="menu" />
                        
      <a-divider style="margin: 4px 0;" />
      <div
        style="padding: 4px 8px; cursor: pointer;"
        @mousedown="e => e.preventDefault()"
                          
      >
        <a-icon type="left" /> <span @click="previous">上一页</span>&nbsp;
        <span @click="next">下一页</span><a-icon type="right" />
      </div>
    </div>
                   
    <a-select-option v-for="s in tempData" :key="s.id">
      {{ s.t }}
    </a-select-option>
  </a-select>
</template>

<script>
  import {
    getUrl
  } from '@/api/manage'
  export default {
    components: {
        VNodes: {
          functional: true,
          render: (h, ctx) => ctx.props.vnodes,
        },
      },
    props: {
      settings : {
         labelInvalue : false,
         showSearch  : false,
         defaultValue : '',
         allowClear : false,
         search : null,
         style : null,
         vModel: null,
         change: null,
         placeholder : ''
      }
    },
    data() {
      return {
        isPaging : true,
        page : 0,
        cu : '',
        placeholder : '请选择院校',
        cuceData: [] ,// 高校
        tempData: [] // 高校
      }
    },
    created() {
       if(this.settings.placeholder != undefined){
          this.placeholder = this.settings.placeholder
       }
      
      this.fetchAllCuList()
    },
    methods: {
      fetchAllCuList(params = {}) {
        return getUrl('/api/getAllCuList', params)
          .then(data => {
            this.cuceData = data.result
            this.tempData = data.result.slice(0, 100)
            
            if(this.settings.defaultValue != ''){
               this.$emit('update:vModel', this.settings.defaultValue)
               this.cu = this.settings.defaultValue
            }
            
          })
      },
      handleSearch(value) {
              this.tempData =  this.cuceData.filter(function (obj) {
                  return obj.t.indexOf(value) > -1
                })
                this.isPaging = false
      },
      onBlur(value) {
               this.isPaging = true
               if(this.cu ==null  || this.cu == []  || this.cu.length == 0){
                  this.page = 0
                 this.tempData = this.cuceData.slice( 0, 100)
               }else{
                 var _this =this
                 this.cuceData.forEach((item, index)  =>{
                           var key = value
                           if(_this.settings.labelInvalue){
                              key = value.key
                           }
                           if(item.id == key){
                              _this.page = Math.floor(index/100)
                           }
                 })
                  var index = (this.page) * 100
                  this.tempData = this.cuceData.slice(index, index + 100)
               }
                
      },
      handleChange(v1, v2){
         this.$emit('update:vModel',v1) 
         this.$emit('change',v1, v2)
         if(v1 == null || v1 =='' || v1 === undefined){
           this.page = 0
           this.tempData = this.cuceData.slice(0,  100)
         }
      },
      clear(){
        this.cu = []
        this.page = 0
        this.tempData = this.cuceData.slice(0,  100)
      },
      setDefault(value){
        this.cu = value
        this.page = 0
        this.tempData = this.cuceData.slice(0,  100)
      },
      previous() {
           if(!this.isPaging) return
           if(this.page == 0) return
           this.page -= 1 
           var index = (this.page) * 100
           this.tempData = this.cuceData.slice(index, index + 100)
      },
      next() {
            if(!this.isPaging) return
            this.page += 1 
            var index = (this.page ) * 100
            var data = this.cuceData.slice(index, index+ 100)
            if(data != null &&  data.length >1){
              this.tempData = data
            }else{
              this.page -= 1 
            }
          },
    }
  }
</script>
<style>
  .ant-select-dropdown-menu-item-selected,
  .ant-select-dropdown-menu-item-selected:hover {
    color: #52c41a;
    font-weight: 700;
    background-color: #fafafa;
  }
  .ant-table-row{
    cursor:pointer;
  }
  .ant-slider-track {
      background-color: #079af5;
  }
</style>
